{% extends 'base/base.html' %}
{% load myinclusion %}
{% block stylesheets %}
    {{ block.super }}

{% endblock %}
{% block content %}
    <div class="right_col" role="main">
        <div class="">
            <div class="clearfix"></div>

            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">

                    <div class="x_panel">
                        <div class="x_title">
                            <h2>{{ page_name }}
                                <small>|&nbsp;<a href="{% url 'code_deploy_list' %}">发布历史</a></small>
                            </h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                </li>
                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>

                        <div class="x_content" style="height:80vh;">


                            <div class="progress">
                                <div class="progress-bar" id="progress-bar" aria-valuenow="60" aria-valuemin="0" ,
                                     aria-valuemax="100"
                                     style="width: 0%;">
                                </div>
                            </div>

                            <span id="progress-status"></span>
                            <span><pre id="progress-msg"
                                       style="word-wrap: break-word; white-space: pre-wrap;"></pre></span>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
{% endblock %}

{% block javascripts %}
  {{ block.super }}
    <script type="text/javascript">

        function get_deploy_progress(deploy_id, callback) {
            $.get("{% url 'code_deploy_manage' aid=deploy_id action='get' %}", callback, "json");
        }


        function check_return(data) {
            if (data["rc"] != 0) {
                alert(data["msg"]);
            }
        }


        function get_url_vars() {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for (var i = 0; i < hashes.length; i++) {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            var hashes = window.location.pathname.slice(1).split('/');
            for (var i = 0; i < hashes.length - 1; i++) {
                vars.push(hashes[i]);
                vars[hashes[i]] = hashes[i + 1];
            }
            return vars;
        }


        $.extend({
            progress: function (deploy_id) {
                get_deploy_progress(deploy_id, function (data) {
                    check_return(data);
                    var data = data["data"];
                    var width = "width: " + data["progress"].toString() + "%;";
                    $("#progress-bar").attr("style", width);
                    if (data["status"] == 2) {
                        $("#progress-status").text("running");
                        $("#progress-msg").text(data["comment"]);
                        setTimeout("$.progress(" + deploy_id + ")", 3000);
                    } else if (data["status"] == 3) {
                        $("#progress-status").text("waiting");
                        $("#progress-msg").text(data["comment"]);
                        setTimeout("$.progress(" + deploy_id + ")", 3000);
                    } else if (data["status"] == 1) {
                        $("#progress-status").text("success");
                        $("#progress-msg").text(data["comment"]);
                    } else if (data["status"] == 4) {
                        $("#progress-status").text("success");
                        $("#progress-msg").text(data["comment"]);
                    } else {
                        $("#progress-status").text("fail");
                        $("#progress-msg").text(data["comment"]);
                    }
                });
            }
        });
        $(document).ready(function () {
            var vars = get_url_vars();
            $.progress(vars["deploys"]);
        });

    </script>
{% endblock %}
